<template>
  <div class="payment">
    <div class="title">付费管理</div>
    <el-tabs
      v-model="app_type"
      class="tabs"
      @tab-click="onAppTypeChange"
    >
      <el-tab-pane
        label="微信小程序"
        name="1"
      ></el-tab-pane>
      <el-tab-pane
        label="抖音小程序"
        name="2"
      ></el-tab-pane>
    </el-tabs>
    <el-radio-group
      v-model="type"
      size="medium"
      style="margin-bottom: 20px;"
      @change="onTypeChange"
    >

      <el-radio-button label="1">普通付费</el-radio-button>
      <el-radio-button label="2">新剧保护</el-radio-button>
    </el-radio-group>

    <div
      class="messagesActive"
      style="margin-left:0px;"
    >
      <div class="icon">
        <i class="el-icon-warning"></i>
      </div>
      <div class="text">
        付费设置是针对所有小程序的定价设置
      </div>
    </div>

    <div class="switch">
      <div
        v-if="type == 2"
        class="el-form-item__label"
      >
        新剧保护付费设置
      </div>
      <div v-if="type == 2">
        <el-switch
          v-model="new_playlet_switch"
          active-value="1"
          inactive-value="2"
          active-color="#13ce66"
          inactive-color="#dcdfe6"
        >
        </el-switch>
      </div>
    </div>
    <el-form
      ref="ruleForm"
      label-width="100px"
      label-position="top"
      :model="ruleForm"
      :rules="rules"
      class="ruleForm"
      :disabled="type == 2 && new_playlet_switch == 2"
    >

      <el-form-item
        v-if="type == 2"
        label="选择短剧"
      >
        <div class="rowFlex selectPlaylet">
          <el-select
            ref="channel"
            v-model="main_playlet_id"
            multiple
            collapse-tags
            remote
            :remote-method="remoteMethod"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsList.playlet"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>

      <el-form-item
        label="单集定价"
        prop="single"
      >
        <div class="rowFlex">
          <!-- <el-input
            v-model="ruleForm.single"
            clearable
            oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
            placeholder="请输入"
          >
            <template slot="prepend">大于等于</template>
          </el-input>
          <p class="text">虚拟币/集</p> -->
          <div class="rowFlex">

            <div class="row_text">
              定价金额
            </div>

            <div class="interval_input">
              <el-form-item prop="single">
                <el-input
                  v-model="single"
                  class="angle_input"
                  clearable
                  placeholder="请输入"
                  style="width: 60px;"
                >
                </el-input>
              </el-form-item>
              ~
              <el-form-item prop="single_max">
                <el-input
                  v-model="ruleForm.single_max"
                  clearable
                  oninput="value = value.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/)"
                  placeholder="请输入"
                  style="width: 60px;"
                  @change="!ruleForm.single_max ? ruleForm.single_max = 0 : null
                  "
                >
                </el-input>
              </el-form-item>
              <div>虚拟币/集</div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label="每档喵币充值赠币最高"
        prop="coin_height"
      >
        <template slot="label">每档喵币充值赠币最高 <el-tooltip
            class="item"
            effect="dark"
            placement="top"
          >
            <div slot="content">
              <p>每档赠币最高=当前档喵币*N%，如档位1:充值喵币，冲10元，喵币100，设置200%，则当前档赠币最多100*200%=200</p>
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        <div class="rowFlex">
          <el-input
            v-model="ruleForm.coin_height"
            clearable
            oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
            placeholder="请输入"
          >
            <template slot="prepend">小于等于</template>
          </el-input>
          <p class="text">%</p>
        </div>
      </el-form-item>
      <div class="subTitle">会员付费设置</div>
      <div class="submitText">
        <div class="rowFlex flexWarp  vipSet">
          <el-form-item
            label="会员包年"
            prop="vip_year"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.vip_year"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="会员包半年"
            prop="vip_half_year"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.vip_half_year"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="会员包季"
            prop="vip_season"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.vip_season"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="会员包月"
            prop="vip_month"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.vip_month"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="会员包15天"
            prop="vip_half_month"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.vip_half_month"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="会员包7天"
            prop="vip_week"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.vip_week"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="会员包3天"
            prop="vip_three_day"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.vip_three_day"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="会员包1天"
            prop="vip_day"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.vip_day"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="解锁本(单)剧全集最低"
            prop="single_playlet"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.single_playlet"
                clearable
                oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
                placeholder="请输入"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">元</p>
            </div>
          </el-form-item>
          <el-form-item
            label="充值挽留折扣最高"
            prop="discount"
            class="vipSetItem"
          >
            <div class="rowFlex">
              <el-input
                v-model="ruleForm.discount"
                clearable
                placeholder="请输入1-9.9"
              >
                <template slot="prepend">大于等于</template>
              </el-input>
              <p class="text">折</p>
            </div>
          </el-form-item>
          <el-form-item
            label="解锁单集价格"
            class="vipSetItem"
          >
            <div class="rowFlex">

              <div class="row_text">
                充值金额
              </div>

              <div class="interval_input">
                <el-form-item prop="single_chapter">
                  <el-input
                    v-model="single_chapter"
                    clearable
                    placeholder="请输入"
                    class="angle_input"
                    style="width: 60px;"
                  >
                  </el-input>
                </el-form-item>
                ~
                <el-form-item prop="single_chapter_max">
                  <el-input
                    v-model="ruleForm.single_chapter_max"
                    clearable
                    oninput="value = value.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/)"
                    placeholder="请输入"
                    style="width: 60px;"
                    @change="!ruleForm.single_chapter_max ? ruleForm.single_chapter_max = 0 : null
                    "
                  >
                  </el-input>
                </el-form-item>
                <div>虚拟币/集</div>
              </div>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div
      class="btn"
      style="margin-top:20px;"
    >
      <el-button
        :loading="loading"
        type="primary"
        @click="submitForm"
      >确定</el-button>
      <el-button @click="close"> 取消</el-button>
    </div>
  </div>
</template>
<script>
import { commonData } from '@/api/common'
import { paymentSave, paymentList } from '@/api/payment'
import { getDecimalPlace, setPayInfo } from '@/utils/index'
export default {
  data() {
    var checkDiscount = (rule, value, callback) => {
      const number = Number(value)
      if (getDecimalPlace(number) > 1) {
        callback(new Error(`只能保留1位小数`))
      } else if (Number(number) < 1 || Number(number) > 9.9) {
        callback(new Error(`折扣在1到9.9之间`))
      } else if (!Number(number)) {
        callback(new Error(`请输入数字`))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      payId: '',
      app_type: '1',
      type: '1',
      new_playlet_switch: false,
      main_playlet_id: [],
      ruleForm: {
        single: '50',
        coin_height: '',
        vip_year: '69',
        vip_half_year: '',
        vip_season: '',
        vip_month: '',
        vip_half_month: '',
        vip_week: '',
        vip_three_day: '',
        vip_day: '',
        discount: 1,
        single_playlet: '',
        single_chapter: '',
        single_chapter_max: ''
      },
      rules: {
        single: [{ required: true, message: '请输入单集定价', trigger: 'blur' }],
        coin_height: [{ required: true, message: '请输入充值喵币', trigger: 'blur' }],
        vip_year: [{ required: true, message: '请输入', trigger: 'blur' }],
        vip_half_year: [{ required: true, message: '请输入', trigger: 'blur' }],
        vip_season: [{ required: true, message: '请输入', trigger: 'blur' }],
        vip_month: [{ required: true, message: '请输入', trigger: 'blur' }],
        vip_half_month: [{ required: true, message: '请输入', trigger: 'blur' }],
        vip_week: [{ required: true, message: '请输入', trigger: 'blur' }],
        vip_three_day: [{ required: true, message: '请输入', trigger: 'blur' }],
        vip_day: [{ required: true, message: '请输入', trigger: 'blur' }],
        single_playlet: [{ required: true, message: '请输入', trigger: 'blur' }],
        discount: [{ required: true, validator: checkDiscount, trigger: 'blur' }],
        single_chapter: [{ required: true, message: '请输入', trigger: 'blur' }],
        single_chapter_max: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      optionsList: {
        playlet: []
      }
    }
  },
  computed: {
    single_chapter: {
      get() {
        return this.ruleForm.single_chapter
      },
      set(value) {
        const newValue = value + ''
        console.log(value, this.ruleForm.single_chapter_max)
        if (this.ruleForm.single_chapter_max) {
          if (Number(newValue) > this.ruleForm.single_chapter_max) {
            this.ruleForm.single_chapter = Number(this.ruleForm.single_chapter_max)
          } else {
            if (newValue.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/)) {
              this.ruleForm.single_chapter = newValue.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/).input
            } else {
              this.ruleForm.single_chapter = 0
            }
          }
        } else {
          if (newValue.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/)) {
            this.ruleForm.single_chapter = newValue.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/).input
          } else {
            this.ruleForm.single_chapter = 0
          }
        }
      }
    },
    single: {
      get() {
        return this.ruleForm.single
      },
      set(value) {
        const newValue = value + ''
        console.log(value, this.ruleForm.single_max)
        if (this.ruleForm.single_max) {
          if (Number(newValue) > this.ruleForm.single_max) {
            this.ruleForm.single = Number(this.ruleForm.single_max)
          } else {
            if (newValue.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/)) {
              this.ruleForm.single = newValue.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/).input
            } else {
              this.ruleForm.single = 0
            }
          }
        } else {
          if (newValue.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/)) {
            this.ruleForm.single = newValue.replace(/^\./g, '0.').match(/\d+\.?\d{0,1}/).input
          } else {
            this.ruleForm.single = 0
          }
        }
      }
    }
  },
  mounted() {
    this.paymentList()
    this.$AccessReport.report('zhangyu-cooperate', [this.$store.state.user.routerItem.name, '付费管理'])
  },
  methods: {
    onAppTypeChange(value) {
      this.paymentList()
    },
    onTypeChange(value) {
      this.paymentList()
    },
    remoteMethod(value) {
      if (value) {
        commonData({ type: 'mainPlayletDown', value: value }).then((res) => {
          if (res.status_code === 1) {
            this.optionsList.playlet = [...new Set([...this.main_playlet_id, ...res.data.data].map((t) => JSON.stringify(t)))].map((s) => JSON.parse(s))
          }
        })
      }
    },
    paymentList() {
      paymentList({ type: this.type, app_type: this.app_type }).then((res) => {
        if (res.data.data && res.data.data.limit_config) {
          this.ruleForm = res.data.data.limit_config
          this.ruleForm.id = res.data.data.id
          this.new_playlet_switch = res.data.data.switch
          this.main_playlet_id = res.data.data.main_playlet_id
            ? res.data.data.main_playlet_id.map((item) => {
                return { value: item.id * 1, label: item.name }
              })
            : []
          this.optionsList.playlet = [...this.main_playlet_id]
        }
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.loading = true
          paymentSave({ limit_config: this.ruleForm, app_type: this.app_type, type: this.type, switch: this.new_playlet_switch, main_playlet_id: this.main_playlet_id.map((item) => item.value) }).then((res) => {
            if (res.status_code === 1) {
              this.$message.success(res.msg)
            }
            this.loading = false
            setPayInfo()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.angle_input {
  ::v-deep .el-input__inner {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.row_text {
  width: 91px !important;
  height: 32px;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.interval_input {
  width: 210px;
  margin-left: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  ::v-deep .el-input__inner {
    width: 60px !important;
  }
  ::v-deep .el-form-item--small {
    margin-bottom: 0 !important;
  }
}
.switch {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.messagesActive {
  margin-top: 0px;
}
.tabs {
  margin-top: 5px;
}
.app-main {
  background: #fff;
}
.payment {
  width: 100%;
  height: calc(100vh - 100px);
  padding: 20px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  overflow: auto;
  ::v-deep .el-divider--horizontal {
    background: #ebeef5;
    margin: 20px 0;
  }
  .title {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    border-left: 3px solid #06c261;
    text-indent: 10px;
    line-height: 15px;
  }
  .text {
    margin-left: 10px;
  }
  .ruleForm {
    margin-top: 0px;
  }
  ::v-deep .el-input {
    width: 210px;
  }
  ::v-deep .el-input__inner {
    width: 210px;
  }
  ::v-deep .el-form-item__label {
    font-weight: 600;
  }
  .submitText {
    width: 900px;
    height: auto;
    padding: 20px;
    background: #f7f8fa;
  }
  .vipSet {
    width: 100%;
    .vipSetItem {
      margin-right: 40px;
    }
  }
  .subTitle {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .selectPlaylet {
    ::v-deep .el-select__tags {
      width: 210px !important;
      max-width: 210px !important;
    }
    ::v-deep .el-input__inner {
      width: 210px !important;
      height: auto !important;
    }
  }
}
</style>